@vezham/icons-react-native 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @vezham/icons-react-native
+
+## 1.0.0
+
+### Patch Changes
+
+- [`4bc7ae2`](https://github.com/vezham/reicon/commit/4bc7ae21342fe26c90359bc0d5cbb74258b32fe7) Thanks [@vx-vigneshwaran](https://github.com/vx-vigneshwaran)! - ver bump
+
+## 1.0.1
+
+### Patch Changes
+
+- [`345a93a`](https://github.com/vezham/reicon/commit/345a93aa6f5a5b7f0d4598a0708eb24dd704046a) Thanks [@vx-vigneshwaran](https://github.com/vx-vigneshwaran)! - ver bump
+
+## 1.0.0
+
+### Patch Changes
+
+- [`ccfadd2`](https://github.com/vezham/reicon/commit/ccfadd29b3031f81cc6986d9e2ff084eca798c81) Thanks [@vx-vigneshwaran](https://github.com/vx-vigneshwaran)! - init test

package/LICENSE

@@ -0,0 +1,32 @@
+SPDX-License-Identifier: MIT
+
+Attribution:
+  Creator / Maintainer : Vezham Technologies Private Limited
+  Original Author      : REICON
+  Licensor             : Vezham Technologies Private Limited
+
+Copyright (c) 2025 REICON.
+Copyright (c) 2025–present Vezham Technologies Private Limited. All rights reserved.
+
+---
+
+MIT License
+
+Copyright (c) 2025 REICON
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,176 @@
+<p align="center">
+  <a href="https://npmjs.com/package/reicon-react-native"><img src="https://img.shields.io/npm/v/reicon-react-native?color=black&label=npm" alt="npm version" /></a>
+  <a href="https://npmjs.com/package/reicon-react-native"><img src="https://img.shields.io/npm/dm/reicon-react-native?color=black&label=downloads" alt="npm downloads" /></a>
+  <a href="https://github.com/dqev/reicon/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-black" alt="MIT License" /></a>
+  <a href="https://reicon.dev"><img src="https://img.shields.io/badge/docs-reicon.dev-black" alt="Documentation" /></a>
+</p>
+
+# Reicon React Native
+
+> 2674+ pixel-perfect SVG icons • Outline & Filled weights • React Native component wrapper • Zero dependencies • MIT Licensed
+
+**Reicon React Native** is the official React Native package for Reicon — a free, open-source SVG icon library with 2674+ handcrafted, grid-aligned icons built for developers and designers. Every component is optimized for tree-shaking and fully TypeScript-ready.
+
+- 🔗 **Website & icon browser:** [reicon.dev](https://reicon.dev)
+- 📦 **Core package:** [reicon](https://npmjs.com/package/reicon)
+- ⚛️ **React package:** [reicon-react](https://npmjs.com/package/reicon-react)
+- 🎨 **Figma plugin:** [reicon.dev/figma](https://reicon.dev/figma)
+
+---
+
+## Install
+
+```bash
+npm i reicon-react-native react-native-svg
+# or
+yarn add reicon-react-native react-native-svg
+# or
+bun add reicon-react-native react-native-svg
+```
+
+**Note:** This package requires `react-native-svg` as a peer dependency. Make sure to install it and follow its [setup instructions](https://github.com/software-mansion/react-native-svg#installation).
+
+---
+
+## Usage
+
+```jsx
+import { Home, ShieldCheck, AltArrowDown } from 'reicon-react-native';
+
+function App() {
+  return (
+    <View>
+      <Home />
+      <ShieldCheck size={32} color="#d97757" />
+      <AltArrowDown weight="Filled" />
+    </View>
+  );
+}
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `number` | `24` | Icon size in pixels |
+| `color` | `string` | `#000000` | Primary icon color |
+| `secondaryColor` | `string` | same as color | Secondary color |
+| `weight` | `IconWeight` | `Outline` | Icon weight / style |
+| `strokeWidth` | `number | string` | — | Override stroke width |
+
+Plus all standard `react-native-svg` SVG props.
+
+### Weights
+
+- **Outline** — clean outlined style (default)
+- **Filled** — solid filled style
+
+```jsx
+import { Home } from 'reicon-react-native';
+
+<Home />                           {/* Outline (default) */}
+<Home weight="Filled" />           {/* Filled */}
+<Home weight="Filled" color="red" />
+```
+
+### Direct icon import (smallest bundle)
+
+```jsx
+import Home from 'reicon-react-native/icons/Home';
+```
+
+### All react-native-svg props are supported
+
+```jsx
+<Home
+  size={48}
+  color="red"
+  style={{ marginRight: 8 }}
+  onPress={() => console.log('pressed')}
+/>
+```
+
+---
+
+## Tree-shaking — import only what you use
+
+Every icon is a standalone ES module. Metro bundler will tree-shake unused icons automatically.
+
+```jsx
+// ✅ Only Home is included in your bundle
+import { Home } from 'reicon-react-native';
+```
+
+---
+
+## Icon Names
+
+Icons use **PascalCase**, derived from their original kebab-case names:
+
+| Original name | Import |
+|---------------|--------|
+| `home` | `Home` |
+| `shield-check` | `ShieldCheck` |
+| `alt-arrow-down` | `AltArrowDown` |
+| `shopping-cart` | `ShoppingCart` |
+| `user-circle` | `UserCircle` |
+
+Browse all 2674+ icons at [reicon.dev](https://reicon.dev).
+
+---
+
+## TypeScript
+
+Full TypeScript support out of the box:
+
+```tsx
+import { Home, IconProps, IconWeight } from 'reicon-react-native';
+
+const weight: IconWeight = 'Filled';
+const props: IconProps = { size: 32, color: '#d97757', weight };
+
+<Home {...props} />
+```
+
+---
+
+## Why Reicon?
+
+| | Reicon | React Native Vector Icons | Lucide RN |
+|--|--------|---------------------------|-----------|
+| **Icons** | 2674+ | 3000+ | 1600+ |
+| **Weights** | Outline + Filled | Varies by set | Outline only |
+| **Tree-shakeable** | ✅ | ❌ | ✅ |
+| **TypeScript** | ✅ | ✅ | ✅ |
+| **Zero dependencies** | ✅ (+ react-native-svg) | ✅ | ✅ (+ react-native-svg) |
+| **MIT License** | ✅ | ✅ | ✅ |
+
+---
+
+## Related packages
+
+| Package | Description |
+|---------|-------------|
+| [`reicon`](https://npmjs.com/package/reicon) | Core vanilla JS + CDN |
+| [`reicon-react`](https://npmjs.com/package/reicon-react) | React components for all 2674+ icons |
+| [`reicon-react-native`](https://npmjs.com/package/reicon-react-native) | **This package.** React Native components for all 2674+ icons |
+| [`reicon-vue`](https://npmjs.com/package/reicon-vue) | Vue 3 components for all 2674+ icons |
+| [`reicon-svelte`](https://npmjs.com/package/reicon-svelte) | Svelte components for all 2674+ icons |
+
+---
+
+## Links
+
+- 🌐 Website: [reicon.dev](https://reicon.dev)
+- 📖 Documentation: [reicon.dev/docs](https://reicon.dev/docs)
+- 📦 npm (React Native): [npmjs.com/package/reicon-react-native](https://npmjs.com/package/reicon-react-native)
+- 🐙 GitHub: [github.com/dqev/reicon](https://github.com/dqev/reicon)
+- 🐛 Issues: [github.com/dqev/reicon/issues](https://github.com/dqev/reicon/issues)
+
+---
+
+## License
+
+MIT © [Dev Chauhan](https://devchauhan.in)
+
+Free to use in personal and commercial projects.

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@vezham/icons-react-native",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "React Native icon components for Reicon.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vezham/reicon",
+    "directory": "packages/icons-react-native"
+  },
+  "bugs": {
+    "url": "https://github.com/vezham/reicon/issues"
+  },
+  "homepage": "https://vezham.com",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.64.0",
+    "react-native-svg": ">=12.0.0"
+  },
+  "scripts": {
+    "build": "node scripts/build.cjs"
+  }
+}

package/scripts/build.cjs

@@ -0,0 +1,463 @@
+#!/usr/bin/env node
+/**
+ * build.cjs — Generates the `reicon-react-native` package from icondata.json
+ *
+ * Usage:  node packages/icons-react-native/scripts/build.cjs  (or: npm run build:react-native)
+ *
+ * Output:
+ *   src/icons/        Individual React Native icon files and type declarations (git-ignored)
+ *   src/index.js      Barrel ESM exports (git-ignored)
+ *   src/index.d.ts    Barrel TypeScript declarations (git-ignored)
+ *   dist/             Standard NPM package ready to publish (git-ignored)
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// ── paths ──────────────────────────────────────────────────────────────────
+const DATA_PATH = path.join(__dirname, '..', '..', '..', 'data', 'icon-data.json');
+const TAGS_PATH = path.join(__dirname, '..', '..', '..', 'data', 'icon-tags.json');
+const SRC = path.join(__dirname, '..', 'src');
+const DIST = path.join(__dirname, '..', 'dist');
+
+// ── weight short keys ──────────────────────────────────────────────────────
+const W_KEY = { Filled: 'F', Outline: 'O' };
+
+// ── helpers ────────────────────────────────────────────────────────────────
+function toPascalCase(str) {
+  return str
+    .split('-')
+    .map(s => s.charAt(0).toUpperCase() + s.slice(1))
+    .join('');
+}
+
+function stripSvgWrapper(code) {
+  if (!code) return '';
+  return code.replace(/^<svg[^>]*>/, '').replace(/<\/svg>\s*$/, '').trim();
+}
+
+// Fix hardcoded fill="white" → currentColor so user color prop works correctly.
+function rewriteColors(svg) {
+  return svg.replace(/fill="white"/g, 'fill="currentColor"');
+}
+
+function escapeForJS(s) {
+  return s.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+}
+
+/**
+ * Build a base64 data URI for an inline SVG preview (shown in IDE hover).
+ */
+function buildPreviewDataUri(weights) {
+  const inner = weights['O'] || weights['F'] || '';
+  if (!inner) return '';
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">${inner}</svg>`
+    .replace(/currentColor/g, '#e4e4e7')
+    .replace(/__RI_SECONDARY__/g, '#9ca3af');
+  return `data:image/svg+xml;base64,${Buffer.from(svg).toString('base64')}`;
+}
+
+// ── read data ──────────────────────────────────────────────────────────────
+console.log('Reading icondata.json …');
+const data = JSON.parse(fs.readFileSync(DATA_PATH, 'utf-8'));
+
+let TAGS = {};
+if (fs.existsSync(TAGS_PATH)) {
+  TAGS = JSON.parse(fs.readFileSync(TAGS_PATH, 'utf-8'));
+  console.log(`Read ${Object.keys(TAGS).length} tag entries`);
+}
+
+// ── collect icons ──────────────────────────────────────────────────────────
+const icons = [];
+const pascalLowerSet = new Set();
+
+for (const [catKey, catData] of Object.entries(data.categories || {})) {
+  for (const [iconKey, icon] of Object.entries(catData.icons || {})) {
+    let pascal = toPascalCase(iconKey);
+
+    if (pascalLowerSet.has(pascal.toLowerCase())) {
+      pascal += toPascalCase(catKey);
+    }
+    pascalLowerSet.add(pascal.toLowerCase());
+
+    const weights = {};
+    for (const [wName, wData] of Object.entries(icon.weights || {})) {
+      const short = W_KEY[wName];
+      if (short && wData.code) {
+        weights[short] = rewriteColors(stripSvgWrapper(wData.code));
+      }
+    }
+
+    if (Object.keys(weights).length > 0) {
+      icons.push({
+        kebab: iconKey,
+        pascal,
+        category: catKey,
+        weights,
+        tags: TAGS[iconKey] || icon.description || [],
+      });
+    }
+  }
+}
+
+icons.sort((a, b) => a.pascal.localeCompare(b.pascal));
+console.log(`Found ${icons.length} icons`);
+
+// ── clean & prepare src/icons ──────────────────────────────────────────────
+fs.rmSync(path.join(SRC, 'icons'), { recursive: true, force: true });
+fs.mkdirSync(path.join(SRC, 'icons'), { recursive: true });
+
+// ── individual icon files ──────────────────────────────────────────────────
+console.log('Generating React Native component files in src/icons/ …');
+
+const barrelExports = [];
+const dtsExports = [];
+
+for (const icon of icons) {
+  const wEntries = Object.entries(icon.weights)
+    .map(([k, v]) => `  ${k}: \`${escapeForJS(v)}\``)
+    .join(',\n');
+
+  const previewUri = buildPreviewDataUri(icon.weights);
+  const kebab = icon.kebab;
+
+  // ── icon .js file with JSDoc ──
+  const iconJS = `import createIcon from '../createIcon.js';
+
+/**
+ * @component
+ * @name ${icon.pascal}
+ * @description Reicon React Native SVG icon component
+ * @preview ![${icon.pascal}](${previewUri}) - https://reicon.dev/icons/${kebab}
+ * @see https://reicon.dev/docs — Documentation
+ * @param {import('../createIcon').IconProps} props — Reicon icon props and any valid react-native-svg props
+ * @returns {JSX.Element} JSX Element
+ */
+const ${icon.pascal} = createIcon('${icon.pascal}', {
+${wEntries}
+});
+
+export { ${icon.pascal} };
+export default ${icon.pascal};
+`;
+
+  fs.writeFileSync(path.join(SRC, 'icons', `${icon.pascal}.js`), iconJS);
+
+  // ── icon .d.ts file with JSDoc ──
+  const iconDTS = `import { IconComponent } from '../createIcon';
+
+/**
+ * @component
+ * @name ${icon.pascal}
+ * @description Reicon React Native SVG icon component
+ * @preview ![${icon.pascal}](${previewUri}) - https://reicon.dev/icons/${kebab}
+ * @see https://reicon.dev/docs — Documentation
+ * @param {import('../createIcon').IconProps} props — Reicon icon props and any valid react-native-svg props
+ * @returns {JSX.Element} JSX Element
+ */
+declare const ${icon.pascal}: IconComponent;
+export { ${icon.pascal} };
+export default ${icon.pascal};
+`;
+
+  fs.writeFileSync(path.join(SRC, 'icons', `${icon.pascal}.d.ts`), iconDTS);
+
+  barrelExports.push(`export { ${icon.pascal} } from './icons/${icon.pascal}.js';`);
+  dtsExports.push(`export { ${icon.pascal} } from './icons/${icon.pascal}.js';`);
+}
+
+// ── index.js (ESM barrel in src/) ──────────────────────────────────────────
+const indexJS = `// Auto-generated barrel — do not edit
+export { createIcon } from './createIcon.js';
+
+${barrelExports.join('\n')}
+`;
+
+fs.writeFileSync(path.join(SRC, 'index.js'), indexJS);
+
+// ── index.d.ts (types in src/) ─────────────────────────────────────────────
+const indexDTS = `// Auto-generated — do not edit
+export { createIcon, IconProps, IconWeight, IconComponent } from './createIcon';
+
+${dtsExports.join('\n')}
+`;
+
+fs.writeFileSync(path.join(SRC, 'index.d.ts'), indexDTS);
+
+// ── recreate src/icons/.gitkeep ────────────────────────────────────────────
+fs.writeFileSync(path.join(SRC, 'icons', '.gitkeep'), '# Keep directory in Git\n');
+
+// ── clean & prepare dist ───────────────────────────────────────────────────
+console.log('Preparing production build in dist/ …');
+fs.rmSync(DIST, { recursive: true, force: true });
+fs.mkdirSync(path.join(DIST, 'icons'), { recursive: true });
+
+// ── copy src files to dist ─────────────────────────────────────────────────
+fs.copyFileSync(path.join(SRC, 'createIcon.js'), path.join(DIST, 'createIcon.js'));
+fs.copyFileSync(path.join(SRC, 'createIcon.d.ts'), path.join(DIST, 'createIcon.d.ts'));
+fs.copyFileSync(path.join(SRC, 'index.js'), path.join(DIST, 'index.js'));
+fs.copyFileSync(path.join(SRC, 'index.d.ts'), path.join(DIST, 'index.d.ts'));
+
+for (const icon of icons) {
+  fs.copyFileSync(path.join(SRC, 'icons', `${icon.pascal}.js`), path.join(DIST, 'icons', `${icon.pascal}.js`));
+  fs.copyFileSync(path.join(SRC, 'icons', `${icon.pascal}.d.ts`), path.join(DIST, 'icons', `${icon.pascal}.d.ts`));
+}
+
+// ── package.json ───────────────────────────────────────────────────────────
+const srcPkg = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf-8'));
+const pkg = {
+  name: srcPkg.name,
+  version: srcPkg.version,
+  type: 'module',
+  description:
+    `React Native icon components for ${icons.length}+ icons in 2 weights (Outline & Filled). Tree-shakeable, TypeScript-ready.`,
+  main: './index.js',
+  module: './index.js',
+  types: './index.d.ts',
+  exports: {
+    '.': {
+      import: './index.js',
+      types: './index.d.ts',
+    },
+    './icons/*': {
+      import: './icons/*.js',
+      types: './icons/*.d.ts',
+    },
+    './createIcon': {
+      import: './createIcon.js',
+      types: './createIcon.d.ts',
+    },
+  },
+  sideEffects: false,
+  files: ['index.js', 'index.d.ts', 'createIcon.js', 'createIcon.d.ts', 'icons/', 'README.md'],
+  peerDependencies: {
+    react: '>=16.8.0',
+    'react-native': '>=0.64.0',
+    'react-native-svg': '>=12.0.0',
+  },
+  keywords: [
+    'icons',
+    'react-native',
+    'react-native-icons',
+    'svg-icons',
+    'icon-library',
+    'reicon',
+    'outline',
+    'filled',
+    'tree-shakeable',
+    'typescript',
+    'mobile',
+    'ios',
+    'android',
+  ],
+  author: {
+    name: 'devchauhan',
+    email: 'dev@devchauhan.in',
+    url: 'https://devchauhan.in',
+  },
+  license: 'MIT',
+  repository: { type: 'git', url: 'https://github.com/vezham/reicon', directory: 'packages/icons-react-native' },
+  bugs: { url: 'https://github.com/vezham/reicon/issues' },
+  homepage: 'https://vezham.com',
+};
+
+fs.writeFileSync(path.join(DIST, 'package.json'), JSON.stringify(pkg, null, 2) + '\n');
+
+// ── README.md ──────────────────────────────────────────────────────────────
+const readme = `<p align="center">
+  <a href="https://npmjs.com/package/reicon-react-native"><img src="https://img.shields.io/npm/v/reicon-react-native?color=black&label=npm" alt="npm version" /></a>
+  <a href="https://npmjs.com/package/reicon-react-native"><img src="https://img.shields.io/npm/dm/reicon-react-native?color=black&label=downloads" alt="npm downloads" /></a>
+  <a href="https://github.com/dqev/reicon/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-black" alt="MIT License" /></a>
+  <a href="https://reicon.dev"><img src="https://img.shields.io/badge/docs-reicon.dev-black" alt="Documentation" /></a>
+</p>
+
+# Reicon React Native
+
+> ${icons.length}+ pixel-perfect SVG icons • Outline & Filled weights • React Native component wrapper • Zero dependencies • MIT Licensed
+
+**Reicon React Native** is the official React Native package for Reicon — a free, open-source SVG icon library with ${icons.length}+ handcrafted, grid-aligned icons built for developers and designers. Every component is optimized for tree-shaking and fully TypeScript-ready.
+
+- 🔗 **Website & icon browser:** [reicon.dev](https://reicon.dev)
+- 📦 **Core package:** [reicon](https://npmjs.com/package/reicon)
+- ⚛️ **React package:** [reicon-react](https://npmjs.com/package/reicon-react)
+- 🎨 **Figma plugin:** [reicon.dev/figma](https://reicon.dev/figma)
+
+---
+
+## Install
+
+\`\`\`bash
+npm i reicon-react-native react-native-svg
+# or
+yarn add reicon-react-native react-native-svg
+# or
+bun add reicon-react-native react-native-svg
+\`\`\`
+
+**Note:** This package requires \`react-native-svg\` as a peer dependency. Make sure to install it and follow its [setup instructions](https://github.com/software-mansion/react-native-svg#installation).
+
+---
+
+## Usage
+
+\`\`\`jsx
+import { Home, ShieldCheck, AltArrowDown } from 'reicon-react-native';
+
+function App() {
+  return (
+    <View>
+      <Home />
+      <ShieldCheck size={32} color="#d97757" />
+      <AltArrowDown weight="Filled" />
+    </View>
+  );
+}
+\`\`\`
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| \`size\` | \`number\` | \`24\` | Icon size in pixels |
+| \`color\` | \`string\` | \`#000000\` | Primary icon color |
+| \`secondaryColor\` | \`string\` | same as color | Secondary color |
+| \`weight\` | \`IconWeight\` | \`Outline\` | Icon weight / style |
+| \`strokeWidth\` | \`number | string\` | — | Override stroke width |
+
+Plus all standard \`react-native-svg\` SVG props.
+
+### Weights
+
+- **Outline** — clean outlined style (default)
+- **Filled** — solid filled style
+
+\`\`\`jsx
+import { Home } from 'reicon-react-native';
+
+<Home />                           {/* Outline (default) */}
+<Home weight="Filled" />           {/* Filled */}
+<Home weight="Filled" color="red" />
+\`\`\`
+
+### Direct icon import (smallest bundle)
+
+\`\`\`jsx
+import Home from 'reicon-react-native/icons/Home';
+\`\`\`
+
+### All react-native-svg props are supported
+
+\`\`\`jsx
+<Home
+  size={48}
+  color="red"
+  style={{ marginRight: 8 }}
+  onPress={() => console.log('pressed')}
+/>
+\`\`\`
+
+---
+
+## Tree-shaking — import only what you use
+
+Every icon is a standalone ES module. Metro bundler will tree-shake unused icons automatically.
+
+\`\`\`jsx
+// ✅ Only Home is included in your bundle
+import { Home } from 'reicon-react-native';
+\`\`\`
+
+---
+
+## Icon Names
+
+Icons use **PascalCase**, derived from their original kebab-case names:
+
+| Original name | Import |
+|---------------|--------|
+| \`home\` | \`Home\` |
+| \`shield-check\` | \`ShieldCheck\` |
+| \`alt-arrow-down\` | \`AltArrowDown\` |
+| \`shopping-cart\` | \`ShoppingCart\` |
+| \`user-circle\` | \`UserCircle\` |
+
+Browse all ${icons.length}+ icons at [reicon.dev](https://reicon.dev).
+
+---
+
+## TypeScript
+
+Full TypeScript support out of the box:
+
+\`\`\`tsx
+import { Home, IconProps, IconWeight } from 'reicon-react-native';
+
+const weight: IconWeight = 'Filled';
+const props: IconProps = { size: 32, color: '#d97757', weight };
+
+<Home {...props} />
+\`\`\`
+
+---
+
+## Why Reicon?
+
+| | Reicon | React Native Vector Icons | Lucide RN |
+|--|--------|---------------------------|-----------|
+| **Icons** | ${icons.length}+ | 3000+ | 1600+ |
+| **Weights** | Outline + Filled | Varies by set | Outline only |
+| **Tree-shakeable** | ✅ | ❌ | ✅ |
+| **TypeScript** | ✅ | ✅ | ✅ |
+| **Zero dependencies** | ✅ (+ react-native-svg) | ✅ | ✅ (+ react-native-svg) |
+| **MIT License** | ✅ | ✅ | ✅ |
+
+---
+
+## Related packages
+
+| Package | Description |
+|---------|-------------|
+| [\`reicon\`](https://npmjs.com/package/reicon) | Core vanilla JS + CDN |
+| [\`reicon-react\`](https://npmjs.com/package/reicon-react) | React components for all ${icons.length}+ icons |
+| [\`reicon-react-native\`](https://npmjs.com/package/reicon-react-native) | **This package.** React Native components for all ${icons.length}+ icons |
+| [\`reicon-vue\`](https://npmjs.com/package/reicon-vue) | Vue 3 components for all ${icons.length}+ icons |
+| [\`reicon-svelte\`](https://npmjs.com/package/reicon-svelte) | Svelte components for all ${icons.length}+ icons |
+
+---
+
+## Links
+
+- 🌐 Website: [reicon.dev](https://reicon.dev)
+- 📖 Documentation: [reicon.dev/docs](https://reicon.dev/docs)
+- 📦 npm (React Native): [npmjs.com/package/reicon-react-native](https://npmjs.com/package/reicon-react-native)
+- 🐙 GitHub: [github.com/dqev/reicon](https://github.com/dqev/reicon)
+- 🐛 Issues: [github.com/dqev/reicon/issues](https://github.com/dqev/reicon/issues)
+
+---
+
+## License
+
+MIT © [Dev Chauhan](https://devchauhan.in)
+
+Free to use in personal and commercial projects.
+`;
+
+fs.writeFileSync(path.join(DIST, 'README.md'), readme);
+fs.writeFileSync(path.join(__dirname, '..', 'README.md'), readme);
+
+// ── icon name map (for documentation / search) ────────────────────────────
+const nameMap = {};
+for (const icon of icons) {
+  nameMap[icon.kebab] = icon.pascal;
+}
+fs.writeFileSync(path.join(DIST, 'icon-names.json'), JSON.stringify(nameMap, null, 2));
+
+// ── summary ────────────────────────────────────────────────────────────────
+const totalFiles = (icons.length * 2) + 5;
+console.log(`\nDone!`);
+console.log(`  Icons:       ${icons.length}`);
+console.log(`  Weights:     Outline + Filled`);
+console.log(`  Files:       ${totalFiles}`);
+console.log(`  Output:      ${DIST}`);
+console.log(`\nTo publish:`);
+console.log(`  cd ${DIST} && npm publish --access public`);

package/src/createIcon.d.ts

@@ -0,0 +1,26 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { SvgProps } from 'react-native-svg';
+
+export type IconWeight = 'Filled' | 'Outline';
+
+export interface IconProps extends Omit<SvgProps, 'color'> {
+  /** Primary color. Default: `currentColor` (black in RN) */
+  color?: string;
+  /** Secondary color. Default: same as color */
+  secondaryColor?: string;
+  /** Icon size (number for RN). Default: `24` */
+  size?: number;
+  /** Icon weight / style. Default: `Outline` */
+  weight?: IconWeight;
+  /** Override stroke-width on stroked weights */
+  strokeWidth?: number | string;
+}
+
+export type IconComponent = ForwardRefExoticComponent<IconProps & RefAttributes<any>>;
+
+export declare function createIcon(
+  displayName: string,
+  iconData: Partial<Record<string, string>>,
+): IconComponent;
+
+export default createIcon;

package/src/createIcon.js

@@ -0,0 +1,63 @@
+import { forwardRef, createElement } from 'react';
+import { SvgXml } from 'react-native-svg';
+
+const W_MAP = { Filled: 'F', Outline: 'O' };
+
+/**
+ * Factory that builds a forwardRef icon component for React Native.
+ * @param {string} displayName  PascalCase icon name
+ * @param {Object} iconData     { F?: string, O?: string }
+ */
+const createIcon = (displayName, iconData) => {
+  const Icon = forwardRef(
+    /**
+     * @param {import('./createIcon').IconProps} props
+     * @param {import('react').Ref<Svg>} ref
+     */
+    (
+      {
+        color,
+        secondaryColor,
+        size = 24,
+        weight = 'Outline',
+        strokeWidth,
+        style,
+        ...rest
+      },
+      ref,
+    ) => {
+      const key = W_MAP[weight] || 'O';
+      let html = iconData[key] || iconData[Object.keys(iconData)[0]] || '';
+
+      if (strokeWidth != null) {
+        html = html.replace(/stroke-width="[^"]*"/g, `stroke-width="${strokeWidth}"`);
+      }
+
+      if (color != null) {
+        html = html.replace(/currentColor/g, color);
+      }
+
+      // Replace secondary color placeholder if present
+      if (secondaryColor) {
+        html = html.replace(/__RI_SECONDARY__/g, secondaryColor);
+      }
+      
+      const svgMarkup = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none">${html}</svg>`;
+
+      return createElement(SvgXml, {
+        ref,
+        xml: svgMarkup,
+        width: size,
+        height: size,
+        style,
+        ...rest,
+      });
+    },
+  );
+
+  Icon.displayName = displayName;
+  return Icon;
+};
+
+export { createIcon };
+export default createIcon;

package/src/icons/.gitkeep

@@ -0,0 +1 @@
+# Keep directory in Git

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020"],
+    "jsx": "react-native",
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}